<template>
  <!-- 首页详情 -->
  <div class="index">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="曲江新区社区"></van-nav-bar>
    <!-- banner 图 -->
    <div class="banner">  
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="item in bannerLists" :key="item.id">
          <img v-lazy="item.bannerImg" @click="grtImg(item.id)"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- Tabbar 标签栏 -->
    <div class="tabbar-block">
      <div class="tabbar-item">
        <!-- Q社区 -->
        <div class="tabbar-item-one">
          <div class="tabbar-item__icon" @click="OnOverview">
            <img src="../assets/img/shequ.png" alt="" >
          </div>
          <div class="tabbar-item__text">Q社区</div>
        </div>
        <!-- Q活动 -->
        <div class="tabbar-item-one">
          <div class="tabbar-item__icon"  @click="Activity">
            <img src="../assets/img/huodong.png" alt="">
          </div>
          <div class="tabbar-item__text">Q活动</div>
        </div>
        <!-- Q服务 -->
        <div class="tabbar-item-one">
          <div class="tabbar-item__icon" @click="oNservice">
            <img src="../assets/img/fuwu.png" alt="" >
          </div>
          <div class="tabbar-item__text">Q服务</div>
        </div>
        <!-- Q联盟卡 -->
        <div class="tabbar-item-one">
          <div class="tabbar-item__icon"  @click="Qlife">
            <img src="../assets/img/lianmeng.png" alt="">
          </div>
          <div class="tabbar-item__text">Q享生活</div>
        </div>
      </div>
    </div>
    <!-- 新闻 -->
    <div class="news">
      <!-- 推荐新闻 -->
      <div class="news-module">
        <div class="fl new-time">
          <div class="module">推荐新闻</div>
        </div>
        <div class="fr more" @click="getMore">更多</div>
      </div>

      <!-- 新闻列表 -->
      <div class="news-list">
        <ul>
          <li  v-for="item in newsList" :key="item.id"  @click="more(item.id)" class="news-content" >
            <div class="fl new-box">
              <span class="new-span">{{item.title}}</span>
              <div class="new-data">
                <div class="fl data">{{item.updateDate}}</div>
              </div>
            </div>
            <div class="fr new-img">
              <img :src="item.funImg" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import apiHttp from '../api/index'
import { Toast } from 'vant'
  export default {
    data() {
      return {
        date:"",  //时间
        bannerLists:[],
        newsList:[],
        commId:'',
        commName:''
      }
    },
    methods:{
      getCode () { // 非静默授权，第一次有弹框
        const code = this.$options.methods.GetUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        if (code == null || code === '') {
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb5737d355cccca0f&redirect_uri=http://wechat.qjsj.net&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
        } else {
          this.register(code) //把code传给后台获取用户信息
        }
      },
      GetUrlParam (name){ 
          var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);     
          if(r!=null)return  unescape(r[2]); 
          return null;
      },
      register (code) { // 通过code获取 openId等用户信息
        let parmes = {
            code:code
        }
         apiHttp.apiIndex.register(parmes,resp=>{
          if(resp.resultCode == '000000'){
              this.personal(resp.userId) 
          }else if(resp.resultCode == '000002'){
              this.personal(resp.userId) 
          }else{
            // Toast(resp.resultMsg);
          }
        })
      },
      personal(userId){ 
        sessionStorage.setItem('userId',userId)
        this.getUserInfo(userId)
      },
      // 登陆家积分
      addLoginRecord(){
        let parmes = {
          userId: sessionStorage.getItem('userId')
        }
        apiHttp.comIndex.addLoginRecord(parmes,resp=>{
          if(resp.resultCode == '000000'){

          }else{
            // Toast(resp.resultMsg);
          }
        })
      },
      // 基本信息
      getUserInfo(){
        let parmes = {
            userId:sessionStorage.getItem('userId')
        }
        apiHttp.comIndex.getUserInfo(parmes,resp=>{
          if(resp.resultCode == '000000'){
              this.commId = resp.data.user.commId
              this.commName = resp.data.user.commName
              sessionStorage.setItem('commId',this.commId)
              this.addLoginRecord()
          }
        })
      },
      // 首页轮播---接口
      getBannerList(){
        apiHttp.apiIndex.getBannerList('',resp=>{
          if(resp.resultCode == '000000'){
            this.bannerLists = resp.data.bannerList
          }else{
          //  Toast(resp.data.resultMsg);
          }
        })
      },
      // 首页新闻列表---接口
      getNewsList(){
        let params ={
          page : 1,
          pageSize :2
        }
        apiHttp.apiIndex.getNewsList(params,resp=>{
          if(resp.resultCode == '000000'){
            this.newsList = resp.data.newsList
          }else{
            // Toast(resp.data.resultMsg);
          }
        })
      },
      // 新闻点击更多
      getMore(){
        this.$router.push({path:"/details/detailsList"});
      },
      //  新闻列表点击进入新闻详情页面
      more(id){  
          this.$router.push({path:"/details/details",query: { id: id}});
      },
      //  轮播图点击
      grtImg(id){ 
          this.$router.push({path:"/details/bannerDetail",query: { id: id,}})},
      //Q社区
      OnOverview(){
        this.commId = sessionStorage.getItem('commId')
        if(this.commId){
          let self = this
          this.$router.push( {name: "comList",query:{id:self.commId,name:self.commName}})
        }else{
          this.$router.push({name:"Community"})
        }
      },
      //Q活动
      Activity(){
        if(this.commId){
          let self = this
          this.$router.push( {path:"/community/Activity",query:{id:self.commId,name:self.commName}})
        }else{
          this.$router.push({path:"/community/Activity"})
        }
      },
      //Q服务
      oNservice(){
        this.$router.push({path:"/community/oNservice"});
      },
      //Q享生活
      Qlife(){
        this.$router.push({path:"/community/Qlife"});
      },
    },
    mounted(){
      // this.getCode ()
      this.getBannerList() // 首页轮播
      this.getNewsList() // 首页新闻列表
      
    },
  }
</script>
<style scoped>
 @import '../assets/css/index.css';
 .new-span{
    height: 1.6rem;
    margin-bottom: 1.5rem;
 } 
</style>